<template>
  <div>
    <button @click="$refs.mmyy.visible = true">添加</button>
    <mybutton-1 ref="mmyy" @click="addpush"></mybutton-1>
    <div class="row">
      <span class="item">文章ID</span>
      <span class="item">文章标题</span>
      <span class="item">文章标签</span>
      <span class="item">作者</span>
      <span class="item">操作</span>
    </div>
    <div v-for="(item, index) in articleList" :key="index" class="row">
      <span class="item">{{ item.id }}</span>
      <span class="item">{{ item.title }}</span>
      <span class="item">{{ item.label }}</span>
      <span class="item">{{ item.author }}</span>
      <span class="item">
        <mybutton @click="bjl">编辑</mybutton>
        <mybutton @click="de" type="danger">删除</mybutton>
      </span>
    </div>
  </div>
</template>

<script>
import mybutton from "./v.vue";
import mybutton1 from "./myDialog.vue";

export default {
  components: {
    mybutton,
    mybutton1,
  },
  data() {
    return {
      articleList: [
        {
          id: "001",
          title: "习近平谈治国理政",
          label: "政治",
          author: "习近平",
          checked: false,
        },
        {
          id: "002",
          title: "明朝那些事儿",
          label: "历史",
          author: "当年明月",
          checked: false,
        },
        {
          id: "003",
          title: "Vue.x",
          label: "计算机",
          author: "尤雨溪",
          checked: false,
        },
      ],
    };
  },
  methods: {
    addpush(item) {
      this.articleList.push(item);
    },
    de() {
      articleList;
    },
    bjl() {
      alert(1);
    },
  },
};
</script>

<style>
.row {
  display: flex;
  text-align: center;
  /* width: 1000px; */
  background: #ccc;
}

.item {
  height: 50px;
  line-height: 50px;
  flex: 1;
}

.title {
  display: flex;
  background: #f2f2f2;
  border-bottom: 1px solid #eee;
  padding: 0 10px;
  text-align: center;
}
.container {
  display: flex;
  background: white;
  border-bottom: 1px solid #eee;
  padding: 0 10px;
  text-align: center;
}
</style>